
import { defineComponent, PropType, reactive, ref } from 'vue';
import { Button } from '../../shared/Button';
import { EmojiSelect } from '../../shared/EmojiSelect';
import { Form, FormItem } from '../../shared/form';
import { Rules, validate } from '../../shared/validate';
import s from './tag.module.scss';
export const TagForm = defineComponent({
    props: {
        name: {
            type: String as PropType<string>
        }
    },

    setup: (props, context) => {
        const formData = reactive({//数据
            name: '',
            sign: '',
        })
        const errors = reactive<{ [k in keyof typeof formData]?: string[] }>({})//错误
        //类型  是个对象         key                             value
        const onSubmit = (e: Event) => {//动作
            e.preventDefault()
            const rules: Rules<typeof formData> = [//校验的范围
                { key: "name", type: 'required', message: "必填" },
                { key: "name", type: 'pattern', regex: /^.{1,4}$/, message: "只能填1~4个字符" },
                { key: "sign", type: 'required', message: "必填" },
            ]
            Object.assign(errors, {
                name: undefined,
                sign: undefined
            })
            Object.assign(errors, validate(formData, rules))//把得到的错误一个一个覆盖给errors

        }
        return () => (
            <form class={s.label} onSubmit={onSubmit}>
                <div class={s.title}>
                    <label  >
                        <span>标签名</span>
                        <div>
                            <input class={s.input} v-model={formData.name} placeholder="3~4个" />
                        </div>
                        <div><span class={s.err}>{errors['name'] ? errors['name'][0] : " "}</span></div>
                    </label>
                </div>
                <div>

                    <label >
                        <div class={s.content}>
                            <span class={s.emoji}>符号{formData.sign}</span>
                        </div>
                        <EmojiSelect v-model={formData.sign} />
                        <div class={s.formItem_errorHint}>
                            <span class={s.err}>{errors['sign'] ? errors['sign'][0] : " "}</span>
                            {/* {errors['sign'].join('')} 显示所有错误 */}
                        </div>
                    </label>
                </div>
                <div class={s.formRow}>
                    <p class={s.tips}>记账时长按标签即可</p>
                    <div class={s.formItem_value}>
                        <Button class={s.btn}>确定</Button>
                    </div>
                </div>
            </form >
            //可用组件Form来做
            // <Form onSubmit={onSubmit}>
            //     <FormItem label='标签名'
            //         type="text"
            //         v-model={formData.name}
            //         error={errors['name'] ? errors['name'][0] : '　'} />
            //     <FormItem label={'符号 ' + formData.sign}
            //         type="emojiSelect" v-model={formData.sign}
            //         error={errors['sign'] ? errors['sign'][0] : '　'} />
            //     <FormItem>
            //         <p class={s.tips}>记账时长按标签即可进行编辑</p>
            //     </FormItem>
            //     <FormItem>
            //         <Button class={[s.button]}>确定</Button>
            //     </FormItem>
            // </Form>
        )
    }
})